{% extends 'base.html' %}
{% block title %}
    用户列表
{% endblock %}
{% block style %}
    <style>
        .action span:hover{
            cursor: pointer;
        }
    </style>
{% endblock %}

{% block status %}
    用户列表展示页
{% endblock %}

{% block breadcrumb %}
    <ol class="breadcrumb">
        <li><a href="/"><i class="fa fa-user"></i> 用户管理</a></li>
        <li class="active">用户列表</li>
    </ol>
{% endblock %}

{% block content %}
{#用户列表展示开始#}
    <div class="row">
        <div href="#" class="col-lg-12" style="margin: 0 20px 10px 0">
            <input type="text" size="30" placeholder="search">
            <a href="#" class="pull-right">
                <i class="glyphicon glyphicon-plus"></i>增加用户
            </a>
        </div>
        <div class="col-lg-12">
            <div class="panel panel-default">
                <div class="panel-body">
                    <table width="100%" class="table table-striped table-hover" id="dataTables-example">
                        <thead>
                            <tr style="color: white;background: #6f7e95;">
                                <th><input type="checkbox" id="checkAll"></th>
                                <th>用户名</th>
                                <th>邮箱</th>
                                <th>联系方式</th>
                                <th>创建时间</th>
                                <th>最近登录时间</th>
                            </tr>
                            {% for line in user_list %}
                                <tr>
                                    {% ifequal line.delete_flag 'N' %}
                                        <td><input type="checkbox" name="_dataCheckBox"></td>
                                        <td>{{ line.username }}</td>
                                        <td>{{ line.email }}</td>
                                        <td>{{ line.phone }}</td>
                                        <td>{{ line.join_date |date:"Y-m-d H:m:s" }}</td>
                                        <td>{{ line.last_login |date:"Y-m-d H:m:s" }}</td>
                                    {% endifequal %}
                                </tr>
                            {% endfor %}
                        </thead>
                    </table>
                </div>
                <!-- /.panel-body -->
            </div>
            <div class="col-sm-5 pull-left" id="action_buttons" style="font-size: 12px">
              <span id="selected_count">0</span>&nbsp;选择 &nbsp;
              <button class="btn btn-default btn-sm" disabled>启用</button>
              <button class="btn btn-default btn-sm" disabled>禁用</button>
              <button class="btn btn-default btn-sm" disabled>修改</button>
              <button class="btn btn-default btn-sm" disabled>删除</button>
          </div>
        </div>
       <!-- /.col-lg-12 -->
   </div>
   <div class="pull-right" style="margin-right: 20px">
        {{ count }}&nbsp;用户
    </div>
{#用户列表展示结束#}
{% endblock %}

{% block action %}
    <script>
        function Delete(doc) {
            var user_id = $(doc).parent().attr('id');
            $.ajax({
                url: "/user/delete/",
                data: {"user_id": user_id},
                type: "POST",
                success: function (callback) {
                    if(callback["status"] == "success"){
                        $(doc).parents('tr').remove();
                    }
                }
            });
        }
    </script>
{% endblock %}